<script setup lang="ts">
import { carbonInventoryApi } from '@/api'

const props = defineProps<{
  carbonInventoryId: number
}>()
const emit = defineEmits<{
  (e: 'open'): void
  (e: 'close'): void
  (e: 'clickOnViewReport'): void
}>()

const AsyncPreview = defineAsyncComponent(() => import('./async-preview.vue'))

const visible = defineModel<boolean>({ required: true })
const info = ref<any>()

watchEffect(() => {
  if (visible.value)
    open()
  else
    close()
})

async function getInfo() {
  const { data } = await carbonInventoryApi.previewCarbonInventoryDetails(
    props.carbonInventoryId,
  )
  info.value = data
}

async function open() {
  getInfo()
  emit('open')
}
async function close() {
  emit('close')
}
</script>

<template>
  <FullscreenModal v-model="visible">
    <div class="m-5 h-[calc(100%-2.5rem)] w-[calc(100%-2.5rem)] flex flex-col">
      <ElPageHeader class="flex-shrink-0 p-3" title="返回" @back="visible = false">
        <template #extra>
          <ElButton type="success" @click="emit('clickOnViewReport')">
            查看碳报告
          </ElButton>
        </template>
      </ElPageHeader>
      <Suspense v-if="info">
        <AsyncPreview :info="info" />
        <template #fallback>
          加载中...
        </template>
      </Suspense>
    </div>
  </FullscreenModal>
</template>
